window.onload = () => {
    baseUrl = "http://172.19.14.60:8080/login"

    let username = document.getElementById("username")
    let password = document.getElementById("password")
    let btn = document.querySelectorAll("input")[2]

    btn.addEventListener("click", (e) => {
        e.preventDefault()
        let name = username.value
        let pas = password.value


        //Promise对象（承诺对象）：是一种异步编程的解决方案，用于处理需要等待的结果操作
        //创建一个Promise对象，传入有两个参数的回调函数
        let promise = new Promise((resolve, reject) => {
            // let success = true
            // if (success) {
            //     resolve() //成功
            // } else {
            //     reject() //失败
            // }

            // setTimeout : JavaScript中用于延迟执行代码
            //      第一个参数是执行函数，第二个参数是延迟时间(单位是毫秒)


            //json 对象
            let data = {
                username: name,
                password: pas
            }

            let xhr = new XMLHttpRequest()
            xhr.open("POST", baseUrl + "?username=" + name + "&password=" + pas, true)

            //设置请求头
            xhr.setRequestHeader("Content-Type", "application/json")

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(xhr.responseText)
                }
            }

            console.log("JSON.stringify(data)输出：", JSON.stringify(data));

            //post发送数据在send里面
            xhr.send(JSON.stringify(data))

            setTimeout(() => {
                // 1秒后模拟成功，触发then回调；若改为reject则触发catch回调
                resolve("成功数据");
                // reject("错误信息"); 
            }, 1000)

            setTimeout((name, pas) => {
                // Promise 的状态只能改变一次‌，一旦 resolve 或 reject 被调用，后续的 resolve/reject 不会生效。
                reject("失败数据")
                console.log(`姓名: ${name}, 密码: ${pas}`)
            }, 1000, "张三", 25)
        })

        // 链式调用示例
        promise.then(data => console.log("成功结果:", data))
            .catch(err => console.error("错误信息:", err))
            .finally(() => console.log("完成"))

    })
}